<template>
  <div class="pseudo-login-container">
    <div class="pseudo-login-card">
      <!-- 提示信息 -->
      <div class="tip-banner" :class="{ expanded: showTip }">
        <el-icon class="tip-icon" @click="showTip = !showTip">
          <InfoFilled />
        </el-icon>
        <transition name="tip-fade">
          <span v-if="showTip" class="tip-text">
            前台是展示，后台是管理，两者登录可以是不同用户
          </span>
        </transition>
      </div>

      <div class="logo-section">
        <img src="/风车.svg" alt="Logo" class="logo" />
        <h1 class="title">风起 - A wind stirs</h1>
        <p class="subtitle">请输入用户名访问对应的博客空间</p>
      </div>

      <!-- 当前用户信息显示 -->
      <div v-if="webInfoStore.hasSelectedWebUser" class="current-user-info">
        <div class="user-card">
          <el-avatar :src="webInfoStore.currentWebUserAvatar" :size="60">
            {{ webInfoStore.currentWebUserNickname.charAt(0) }}
          </el-avatar>
          <div class="user-details">
            <h3>{{ webInfoStore.currentWebUserNickname }}</h3>
            <p>@{{ webInfoStore.currentWebUsername }}</p>
            <el-tag type="success" size="small">当前用户</el-tag>
          </div>
        </div>

        <div class="button-group">
          <el-button type="primary" @click="goToHome" class="continue-btn">
            继续访问博客
          </el-button>
          <el-button @click="switchUser" class="switch-btn">
            切换用户
          </el-button>
        </div>
      </div>

      <div v-else class="login-form">
        <el-input
          v-model="username"
          placeholder="请输入用户名/昵称"
          size="large"
          :prefix-icon="User"
          clearable
          @keyup.enter="handleLogin"
        >
        </el-input>

        <el-button
          type="primary"
          size="large"
          :loading="loading"
          @click="handleLogin"
          class="login-btn"
        >
          进入博客
        </el-button>
      </div>

      <div class="footer">
        <el-link type="info" href="/login">管理后台登录</el-link>
        <span class="divider">|</span>
        <el-link type="primary" @click="goToRegister">
          注册
        </el-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus"
import { User, InfoFilled } from "@element-plus/icons-vue"
import { pseudoLoginAPI } from "@/api/web/auth"
import { useWebInfoStore } from "@/store/modules/webInfo"

const router = useRouter()
const webInfoStore = useWebInfoStore()

const username = ref("")
const loading = ref(false)
const showTip = ref(false) // 控制提示信息显示

/**
 * 处理登录
 */
const handleLogin = async () => {
  if (!username.value || username.value.trim() === "") {
    ElMessage.warning("请输入用户名")
    return
  }

  loading.value = true
  try {
    const res: any = await pseudoLoginAPI(username.value.trim())
    if (res.code === 200) {
      // 存储用户信息
      webInfoStore.setCurrentWebUser(res.data)

      ElMessage.success(`欢迎访问 ${res.data.nickname} 的博客空间`)

      // 跳转到首页
      setTimeout(() => {
        router.push("/")
      }, 500)
    }
  } catch (error: any) {
    if (error.response?.status === 404) {
      ElMessage.error("用户不存在，请检查用户名是否正确")
    } else {
      ElMessage.error("登录失败，请稍后重试")
    }
  } finally {
    loading.value = false
  }
}

/**
 * 继续访问博客
 */
const goToHome = () => {
  router.push("/")
}

/**
 * 切换用户
 */
const switchUser = () => {
  webInfoStore.clearCurrentWebUser()
  username.value = ""
  ElMessage.info("请重新选择用户")
}

/**
 * 跳转到注册页面
 */
const goToRegister = () => {
  router.push("/register")
}

/**
 * 页面加载时，如果已经有用户信息，自动跳转
 */
onMounted(() => {
  // 注释掉自动跳转，让用户选择
  // if (webInfoStore.hasSelectedWebUser) {
  //   ElMessage.info(`当前访问的是 ${webInfoStore.currentWebUserNickname} 的博客`)
  //   setTimeout(() => {
  //     router.push("/")
  //   }, 1000)
  // }
})
</script>

<style scoped lang="scss">
.pseudo-login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  padding: 20px;
  position: relative;
  overflow: hidden;

  // 背景动画效果
  &::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    );
    background-size: 50px 50px;
    animation: backgroundMove 20s linear infinite;
  }

  @keyframes backgroundMove {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(50px, 50px);
    }
  }
}

.pseudo-login-card {
  width: 100%;
  max-width: 480px;
  background: white;
  border-radius: 20px;
  padding: 50px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;

  @media (max-width: 768px) {
    padding: 40px 30px;
    max-width: 400px;
  }
}

.tip-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  border: 1px solid #c3e6cb;
  border-radius: 20px;
  font-size: 13px;
  color: #155724;
  line-height: 1.6;
  box-shadow: 0 2px 8px rgba(21, 87, 36, 0.1);
  transition: all 0.3s ease;
  width: fit-content;

  .tip-icon {
    font-size: 20px;
    color: #28a745;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.3s ease;
    flex-shrink: 0;

    &:hover {
      background: rgba(40, 167, 69, 0.1);
      transform: scale(1.1);
    }

    &:active {
      transform: scale(0.95);
    }
  }

  .tip-text {
    padding: 0 12px 0 4px;
    white-space: nowrap;
    overflow: hidden;
  }

  &.expanded {
    width: auto;
    padding: 10px 16px 10px 10px;
  }

  @media (max-width: 768px) {
    font-size: 12px;

    .tip-text {
      white-space: normal;
      max-width: 280px;
    }
  }
}

// 提示文字淡入淡出动画
.tip-fade-enter-active,
.tip-fade-leave-active {
  transition: opacity 0.3s ease;
}

.tip-fade-enter-from,
.tip-fade-leave-to {
  opacity: 0;
}

.logo-section {
  text-align: center;
  margin-bottom: 40px;

  .logo {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    animation: rotate 20s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
  }
}

.current-user-info {
  text-align: center;
  margin-bottom: 20px;

  .user-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 20px;

    .user-details {
      text-align: left;

      h3 {
        margin: 0 0 8px 0;
        font-size: 18px;
        color: #333;
      }

      p {
        margin: 0 0 8px 0;
        color: #666;
        font-size: 14px;
      }
    }
  }

  .continue-btn {
    width: 100%;
    margin-bottom: 0;
    height: 45px;
    font-size: 16px;
    font-weight: 600;
    background: var(--gradient-primary);
    border: none;
    transition: all 0.3s;
    border-radius: 8px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
    }
  }

  .switch-btn {
    width: 100%;
    height: 45px; // 修改为与continue-btn相同的高度
    font-size: 14px;
    color: #666;
    border: 1px solid #ddd;
    background: white;
    border-radius: 8px; // 添加圆角
    transition: all 0.3s; // 添加过渡动画
    margin: 0;

    &:hover {
      color: #667eea;
      border-color: #667eea;
      transform: translateY(-1px); // 添加悬停效果
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  }

  // 按钮组容器样式
  .button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
  }
}

.login-form {
  .login-btn {
    width: 100%;
    margin-top: 20px;
    height: 45px;
    font-size: 16px;
    font-weight: 600;
    background: var(--gradient-primary);
    border: none;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

.footer {
  margin-top: 30px;
  text-align: center;
  color: #666;
  font-size: 14px;

  .divider {
    margin: 0 10px;
    color: #ddd;
  }
}

:deep(.el-input__wrapper) {
  height: 45px;
  font-size: 15px;
}
</style>

